<template>
    <div class="login-bg">
        <div class="login-container">
            <div class="login-header">
                <img class="logo mr10" src="../../assets/img/logo.svg" alt=""/>
                <div class="login-title">湖北省招生信息综合服务平台</div>
            </div>
            <el-form :model="param" ref="loginRef" size="large">
                <el-form-item prop="username">
                    <el-input v-model="param.username" placeholder="用户名">
                        <template #prepend>
                            <el-icon>
                                <User/>
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            type="password"
                            placeholder="密码"
                            v-model="param.password"
                            @keyup.enter="submitForm"
                    >
                        <template #prepend>
                            <el-icon>
                                <Lock/>
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-button
                        class="login-btn"
                        type="primary"
                        size="large"
                        @click="submitForm"
                >登录
                </el-button>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {loginApi} from "@/api/user";
import {useRouter} from "vue-router";
import {$msg} from "@/utils";
import {setToken} from "@/utils/auth";
const router = useRouter();
const param = ref({
    username: "",
    password: "",
});

const rules: FormRules = {
    username: [
        {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
        },
    ],
    password: [{required: true, message: "请输入密码", trigger: "blur"}],
};
const loginRef = ref(null);
//client_id=admin-client&client_secret=secret&grant_type=password&username=admin&password=secret
const submitForm = () => {
    loginRef.value.validate((valid) => {
        if (valid) {
            const data = new FormData()
            data.append("username", param.value.username)
            data.append("password", param.value.password)
            data.append("grant_type", "password")
            data.append("client_id", "admin-client")
            data.append("client_secret", "secret")
            loginApi(data).then((res) => {
                setToken(res.data.access_token)
                $msg({type: 'success', message: "登录成功"});
                router.push("/");
            })
        } else {
            $msg({type: 'error', message: "登录失败"});
            return;
        }
    });
};

</script>

<style scoped>
.login-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: url(../../assets/img/login-bg.jpg) center/cover no-repeat;
}

.login-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.logo {
    width: 35px;
}

.login-title {
    font-size: 22px;
    color: #333;
    font-weight: bold;
}

.login-container {
    width: 450px;
    border-radius: 5px;
    background: #fff;
    padding: 40px 50px 50px;
    box-sizing: border-box;
}

.pwd-tips {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin: -10px 0 10px;
    color: #787878;
}

.pwd-checkbox {
    height: auto;
}

.login-btn {
    display: block;
    width: 100%;
}

.login-tips {
    font-size: 12px;
    color: #999;
}

.login-text {
    display: flex;
    align-items: center;
    margin-top: 20px;
    font-size: 14px;
    color: #787878;
}

.kongkong {
    height: 0;
}
</style>
